﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="test.aspx.cs" Inherits="Menu_test" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
    <script src="js/jquery.min.js" type="text/javascript"></script>
    <style type="text/css">
body {
    font-family:Arial, Helvetica, sans-serif;
}
#wrapper {
    width:250px;
}
ul.tabs {
    width:250px;
    margin:0;
    padding:0;
}
ul.tabs li {
    display:block;
    float:left;
    padding:0 5px;
}
ul.tabs li a {
    display:block;
    float:left;
    padding:5px;
    font-size:0.8em;
    background-color:#e0e0e0;
    color:#666;
    text-decoration:none;
}
.selected {
    font-weight:bold;
}
.tab-content {
	clear:both;
    border:1px solid #ddd;
    padding:10px;
}
</style>
<script type="text/javascript">
<!--
$(document).ready(function() {
 
	$('.tabs a').click(function(){
		switch_tabs($(this));
	});
 
	switch_tabs($('.defaulttab'));
 
});
 
function switch_tabs(obj)
{
	$('.tab-content').hide();
	$('.tabs a').removeClass("selected");
	var id = obj.attr("rel");
 
	$('#'+id).show();
	obj.addClass("selected");
}
//-->
</script>

</head>
<body>
    <form id="form1" runat="server">
   <div id="wrapper">

    <ul class="tabs">
        <li><a href="javascript:void(0)" class="defaulttab" rel="tabs1">Tab #1</a></li>
        <li><a href="javascript:void(0)" rel="tabs2">Tab #2</a></li>
        <li><a href="javascript:void(0)" rel="tabs3">Tab #3</a></li>
    </ul>
 
    <div class="tab-content" id="tabs1">Tab #1 content</div>
    <div class="tab-content" id="tabs2">Tab #2 content</div>

    <div class="tab-content" id="tabs3">Tab #3 content</div>
   </div>

    </form>
</body>
</html>
